<script setup lang="ts">
// // pages/user/index.js
import { loginAPI, getMyDataAPI, getTopicListAPI,getVipAPI } from '@/services/my'
import { onLoad, onShow } from '@dcloudio/uni-app'
import type { mylogin } from '@/types/my'
import { defineProps, defineEmits, defineExpose, ref, onMounted } from 'vue'
import { myStore } from '@/stores'
import { useMemberStore,vip } from '@/stores'
import { openVIP, getVIP } from '@/services/my copy'
// 获取登录的数据
// mylogin[]是数据类型
const flag = ref<any>(true)
// 定义 emit 类型
const emit = defineEmits(['click', 'addNumb'])
const mylogin1 = myStore()
const member = useMemberStore()
const usrInfo1 = ref<any>()
const collectNum = ref<any>(0)
  const vip1 = vip()
  const vip11 = ref(0)

// 跳转登录页面
const handleGetuserinfo = () => {
  uni.navigateTo({
    url: '../login/login',
  })

  // const bannerList = ref<mylogin>()

  // let userInfo = {
  //   username: 'Joe',
  //   password: '123',
  //   gender: 1,
  //   language: '中文',
  //   city: '百京',
  //   picAddress: 'https://example.com/profile_pic.jpg',
  // }
  // console.log('啊啊啊')
  // const res = await loginAPI(userInfo)
  // bannerList.value = res.data
  // console.log(res)

  // // session 即可
  // // const token = bannerList.value.token
  // mylogin1.setuserinfo(bannerList.value)
  // // 存入token到userinfo 里 ，然后在http后面就可以取出来，因为存在持久化
  // // member.upProfile(token)
  usrInfo1.value = true
}
// 跳转注册页面
const handzhuce = () => {
  uni.navigateTo({
    url: '../zhuche/index',
  })
}
// 测试功能
const handleRefund = () => {
  uni.navigateTo({
    url: '../../pagesA/user-space/index?gerenail=' + JSON.stringify(item.value),
  })
}
// 点击退出登录
const outto = () => {
  uni.showModal({
    title: '提示',
    content: '确认退出登录吗？',
    success: function (res) {
      if (res.confirm) {
        // 执行确认后的操作
        // 输出本地缓存的数据
        mylogin1.clearuserinfo() // 去掉this
        member.clearProfile()
        member.cleartoken()
        usrInfo1.value = false // 去掉this
        guanzhu.value = 0
        fengsi.value = 0
        tiezi.value = 0
        uni.showToast({
          title: '退出成功',
          //将值设置为 success 或者直接不用写icon这个参数
          icon: 'success',
          //显示持续时间为 2秒
          duration: 2000,
        })
      } else {
        // 执行取消后的操作
        uni.showToast({
          title: '取消成功',
          //将值设置为 success 或者直接不用写icon这个参数
          icon: 'success',
          //显示持续时间为 2秒
          duration: 2000,
        })
      }
    },
  })
}
// 关注和粉丝的数量
const guanzhu = ref(0)
const fengsi = ref(0)
const tiezi = ref(0)
// 定义生命周期钩子
const item = ref('')
onShow(async () => {
  console.log('44444')
  if (member.profile.token) {
    console.log(1)

    usrInfo1.value = true
  } else {
    console.log(2)

    usrInfo1.value = false
  }
  let res: any = await getMyDataAPI({ user: mylogin1.userinfo })
  console.log(res, '获取到关注这些数据')
  guanzhu.value = res.guanzhu
  fengsi.value = res.fengsi
  tiezi.value = res.tiezi
  let res1 = await getTopicListAPI({ user: mylogin1.userinfo })
  console.log(res1, '帖子')
  item.value = res1.data[0]
  vip11.value = vip1.vipid

  let res2 = await getVipAPI({ user: mylogin1.userinfo })
  console.log(res2, '获取到VIP剩余天数数据')

})

const dindan = () => {
  uni.navigateTo({
    url: '../../pagesA/dingdan/index',
  })
}
// 跳转到关注和粉丝页
const guanzhu1 = (biao) => {
  uni.navigateTo({
    url: '../../pagesA/socketliao/comp/search/index?data=' + biao,
    success: function (res) {
      // 打开新页面后，需要执行的代码写在这里
    },
  })
}
// 跳转编辑资料页面
const bianji = () => {
  uni.navigateTo({
    url: '../../pagesA/bianjiyem/index?gerenail=' + JSON.stringify(item.value),
  })
}
// 跳转到历史数据
const lishi = () => {
  uni.navigateTo({
    url: '../../pagesB/ks_lishi/index',
  })
}
// 开通VIP
const VIP = () => {
  uni.navigateTo({
    url: '../../pagesB/huiyuan_VIP/index',
  })
}
</script>

<template>
  <view style="height: 100%">
    <!-- pages/user/index.wxml -->
    <!-- 个人中心页面 -->
    <!--     <view class="cart-bg" v-if="!userInfo"></view> -->
    <view class="user-info-wrap" v-if="usrInfo1">
      <view class="user-img-wrap">
        <view class="position-relative mohu">
          <image
            :src="mylogin1.userinfo.picAddress"
            class="indistinct w-100"
            style="height: 450rpx"
            mode="aspectFill"
          ></image>
        </view>
        <view class="user-info">
          <image class="user-icon" :src="mylogin1.userinfo.picAddress" />
          <view class="user-name">{{ mylogin1.userinfo.username }}

          </view>
          <text class="iconfont order-icon icon-huiyuan" style="color: yellow;font-size: 40rpx;position: absolute;right: 10rpx;bottom: 240rpx;" v-if="vip11=='true'"></text>
          <!-- <button type="primary" @tap="outto()" :class="mylogin1.userinfo ? 'outto' : 'outto1'">
            退出登录
          </button> -->
        </view>
      </view>
    </view>
    <view class="noUser" v-else>
      <image class="avatar" src="../../static/assets/img/海贼王_r.jpg" mode="widthFix"></image>
      <view class="loginAndReg">
        <text class="info">登录领福利啦~</text>
        <view class="button">
          <!-- 这个按钮是微信小程序里的属性可以getUserInfo 是其中一种可能的取值，表示当用户点击该按钮时，小程序会自动触发获取用户信息的操作 -->
          <button class="login" @tap="handleGetuserinfo">登录</button>
          <button class="register" @tap="handzhuce">注册</button>
        </view>
      </view>
    </view>
    <view class="use-content">
      <view class="use-main">
        <!-- 历史足迹 -->
        <view class="history-wrap">
          <view @tap="handleRefund">
            <view class="history-num">{{ tiezi }}</view>
            <view class="history-name" style="flex: 2">帖子</view>
          </view>
          <view @tap="guanzhu1(1)">
            <view class="history-num">{{ guanzhu }}</view>
            <view class="history-name" style="flex: 1">关注</view>
          </view>
          <view @tap="guanzhu1(2)">
            <view class="history-num">{{ fengsi }}</view>
            <view class="history-name" style="flex: 1">粉丝</view>
          </view>
        </view>
        <!-- 我的订单 -->
        <view class="order">
          <view class="order-top">个人中心页面</view>
          <view class="order-content">
            <!-- <navigator class="content-item" url="/pages/order/index?type=1" @tap="dindan">
              <text class="iconfont order-icon icon-dingdan"></text>

              <view class="allOrder">VIP</view>
            </navigator> -->
            <navigator class="content-item" url="/pages/order/index?type=2" @tap="">
              <text class="iconfont order-icon icon-tuijianfuwu"></text>
              <view class="allOrder">我的练习</view>
            </navigator>
            <navigator class="content-item" url="../../pagesA/socketliao/index" >
              <text class="iconfont order-icon icon-shengyaceshi"></text>
              <view class="allOrder">我的消息</view>
            </navigator>
            <view class="content-item" @tap="lishi">
              <text class="iconfont order-icon icon-pingjia"></text>
              <view class="allOrder">观看历史</view>
            </view>
          </view>
        </view>
        <!-- 其他设置 -->
        <view class="other">
          <!-- <view class="other-item">
            <view class="iconAndTitle">
              <view class="info">
                <text class="icon iconfont icon-dizhi" />

                缓存下载
              </view>
            </view>
            <text class="icon iconfont icon-youjiantou"></text>
          </view> -->
          <view class="other-item">
            <view class="iconAndTitle">
              <button class="info" open-type="contact">
                <text class="icon iconfont icon-lianxikefu" />

                联系客服 --15812688391
              </button>
            </view>
            <text class="icon iconfont icon-youjiantou"></text>
          </view>
          <!-- <view class="other-item">
            <view class="iconAndTitle">
              <view class="info" open-type="feedback">
                <text class="icon iconfont icon-yonghuyijianfankui" />

                意见反馈
              </view>
            </view>
            <text class="icon iconfont icon-youjiantou"></text>
          </view> -->
          <view class="other-item" @tap="bianji()">
            <view class="iconAndTitle">
              <view class="info" open-type="share">
                <text class="icon iconfont icon-tuijianfuwu" />
                编辑资料
              </view>
            </view>
            <text class="icon iconfont icon-youjiantou"></text>
          </view>
          <view class="other-item" @tap="VIP()">
            <view class="iconAndTitle">
              <view class="info" open-type="share">
                <text class="icon iconfont icon-tuijianfuwu" />
                开通VIP
              </view>
            </view>
            <text class="icon iconfont icon-youjiantou"></text>
          </view>
          <view class="other-item" @tap="outto()">
            <view class="iconAndTitle">
              <view class="info" open-type="share">
                <text class="icon iconfont icon-tuijianfuwu" />
                退出登录
              </view>
            </view>
            <text class="icon iconfont icon-youjiantou"></text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
@import url('../../static/assets/wxss/iconfont.css');
//
/* pages/user/index.wxss */
page {
  background-image: url('https://img.tukuppt.com/ad_preview/00/79/64/60c303da02149.jpg!/fw/980');
  // background: linear-gradient(to right, rgb(175, 221, 227), rgb(243, 234, 236));
}

.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.cart-bg {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 240rpx;
  // background-image: url('https://img.tukuppt.com/ad_preview/00/79/64/60c303da02149.jpg!/fw/980');
  color: #0f7cdb;
  z-index: -1;
}
.noUser {
  margin-top: 30rpx;
  margin-left: 30rpx;
  display: flex;
  align-items: center;
}
.noUser .avatar {
  width: 150rpx;
  height: 150rpx;
  border-radius: 50%;
}
.noUser .loginAndReg {
  margin-left: 20rpx;
}
.noUser .loginAndReg .info {
  font-size: 28rpx;
  color: #ffffff;
}
.noUser .loginAndReg .button {
  display: flex;
  margin-top: 10rpx;
}
.noUser .loginAndReg .button .login,
.noUser .loginAndReg .button .register {
  margin: 0;
  padding: 0;
  width: 160rpx;
  background: linear-gradient(to right, rgb(0, 225, 255), pink);
  color: #ffffff;
  font-size: 26rpx;
  padding: 10rpx 30rpx;
  border-radius: 30rpx;
  font-weight: 400;
  opacity: 1;
}
.noUser .loginAndReg .button .login {
  margin-right: 10rpx;
}
.user-info-wrap {
  height: 360rpx;
}
.user-info-wrap .user-img-wrap {
  position: relative;
}

.user-info-wrap .user-img-wrap .user-bg {
  height: 340rpx;
  width: 100vw;
  background-color: #eae4e4;
}
.user-info-wrap .user-img-wrap .user-info {
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  top: 10%;
  text-align: center;
}
.user-info-wrap .user-img-wrap .user-info .outto {
  width: 150rpx;
  height: 50rpx;
  font-size: 10px;
  border-radius: 50%;
  color: rgb(19, 138, 198);
}
.user-info-wrap .user-img-wrap .user-info .outto1 {
  display: none;
}
.user-info-wrap .user-img-wrap .user-info .user-icon {
  width: 200rpx;
  height: 200rpx;
  border-radius: 50%;
}
.user-info-wrap .user-img-wrap .user-info .user-name {
  font-family: '微软雅黑'; /*设置字体*/
  position: relative;
  top: 30rpx;
  font-size: 69rpx;
  background: -webkit-linear-gradient(top, #0dff00, #ff009d); /*设置线性渐变*/
  /*为了支持更多的浏览器*/
  -webkit-background-clip: text; /*背景被裁剪到文字*/
  -webkit-text-fill-color: transparent; /*设置文字的填充颜色*/
  text-shadow: 0 8px 10px #ff66e0; /*设置文字阴影*/
  text-align: center;

  animation: flicker 2s infinite; /*设置动画*/
}
@keyframes flicker {
  /*创建动画*/
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
.use-content {
  width: 100%;
  height: 500rpx;
}
.use-content .use-main {
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  top: 400rpx;

  width: 100%;
  height: 70%;
  // 圆润左上和右上

  border-radius: 30rpx 30rpx 0rpx 0rpx;
}
.use-content .use-main .history-wrap {
  width: 100%;

  background: linear-gradient(to right, rgb(0, 225, 255), rgb(244, 220, 224));
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-radius: 10rpx;
  opacity: 0.8;
  color: #050c0dee;
  border-radius: 30rpx;
}
.history-name {
  flex: 1;
  // 字体变好看
  font-size: 30rpx;
  text-align: center;
  color: #050c0dee;
  font-weight: 600;
  font-family: 'Microsoft YaHei';
  font-style: normal;
  font-stretch: normal;
  letter-spacing: 0px;
  // 字体阴影
  text-shadow: 0 0 100rpx #0000001a;
}
.use-content .use-main .history-wrap navigator {
  text-align: center;
  padding: 20px 20px;
}
.use-content .use-main .history-wrap .history-num {
  color: rgb(26, 167, 232);
  font-size: 30px;
  text-align: center;
}
.use-content .use-main .history-wrap navigator .history-num {
  color: rgb(26, 167, 232);
  text-align: center;

  font-size: 30px;
}
.use-content .use-main .order {
  margin-top: 20px;
  background: linear-gradient(to right, rgb(0, 225, 255), rgb(244, 220, 224));
  border-radius: 10px;
  opacity: 0.8;
}
.use-content .use-main .order .order-top {
  padding: 20rpx 20rpx 12rpx 6rpx;
  font-size: 32rpx;
  color: #050c0dee;
}
.use-content .use-main .order .order-top::before {
  content: '@';
  display: inline-block;
  width: 20px;
  height: 30px;
  background: linear-gradient(to right, rgb(0, 225, 255), #03a2ec);
  position: relative;
}
.use-content .use-main .order .order-content {
  display: flex;
  justify-content: space-between;
  text-align: center;
}
.use-content .use-main .order .order-content navigator,
.use-content .use-main .order .order-content view {
  text-align: center;
  padding: 10rpx 20rpx;
  margin: 0; /* 设置 margin 为零 */
}

.use-content .use-main .order .order-content .content-item .order-icon {
  color: #eb2b2be0;
  font-size: 40rpx;
}

.use-content .use-main .order .order-content .content-item .allOrder {
  margin-top: 6rpx;
  color: #050c0dee;
}
.use-content .use-main .other {
  margin-top: 20rpx;
  border-radius: 10rpx;
  background: linear-gradient(to right, rgb(0, 225, 255), rgb(244, 220, 224));
  opacity: 0.8;
}
.use-content .use-main .other .other-item {
  display: flex;
  padding: 20rpx;
  align-items: center;
  justify-content: space-between;
  font-size: 32rpx;
}
.use-content .use-main .other .other-item .iconAndTitle {
  display: flex;
}
.use-content .use-main .other .other-item .iconAndTitle button {
  background-color: #03a2ec00;
  height: 55rpx;
}
.use-content .use-main .other .other-item .iconAndTitle .info {
  flex: 1;
  color: #050c0dee;
  margin-left: 10rpx;
  font-size: 30rpx;
  margin: 0;
  padding: 0;
  border-radius: 0;
  font-weight: 400;
  width: auto;
}
.use-content .use-main .other .other-item .iconAndTitle .info .icon {
  color: #eb2b2be0;
  font-size: 34rpx;
}
.use-content .use-main .other .other-item:nth-last-child(1) {
  border: none;
}
.mohu {
  // 模糊效果更大

  -webkit-filter: blur(5px);
  filter: blur(2px);
}
</style>
